<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- mui.js -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- 引入城市组件的样式 -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/UserProfile.css" />
</head>

<body>
    <!-- 用户信息 -->
    <div class="user">
        <div class="avatar wow fadeInUp">
            <img src="./assets/images/avatar.png" />
        </div>
    </div>

    <form class="profile wow fadeInUp" data-wow-delay="200ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">手机号</label>
            <input type="number" class="form-control" id="mobile" placeholder="请输入手机号" required />
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码" />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="gender form-control" required>
                <option>请选择</option>
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div class="from-group" style="position: relative;margin-bottom:15px">
            <label for="region">所在地区</label>
            <input type="text" readonly id="region" name="region" placeholder="请选择所在地区" data-toggle="city-picker" />
        </div>

        <div class="form-group">
            <label for="address">详细地址</label>
            <input type="text" class="form-control" id="address" placeholder="请输入详细地址" />
        </div>

        <div class="form-group" style="display: none;">
            <label for="avatar">头像</label>
            <input type="file" name="avatar" id="avatar" placeholder="请选择头像" />
        </div>

        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>
    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="ContactAdd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="UserIndex.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- 引入mui.js文件 -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/axios/axios.min.js"></script>

<!-- 自己封装的接口文件 -->
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie封装文件 -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 引入登录判断的文件 -->
<script src="./assets/plugins/login.js"></script>

<!-- 引入城市组件 -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>
<script>
    //实例化wow.js
    new WOW().init()

    //先获取到用户信息
    var business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

    //判断是否为空对象
    if (Object.getOwnPropertyNames(business).length > 0) {
        $("#nickname").val(business.nickname)
        $("#mobile").val(business.mobile)
        $(".gender").val(business.gender)
        $(".avatar img").attr('src', business.avatar)
        $('#address').val(business.address)

        //地区做一个初始化
        if (business.region) {
            //需要先重置一下地区插件
            $('#region').citypicker('reset')
            $('#region').citypicker('destroy')

            //赋值默认值
            $('#region').citypicker({
                province: business.province,
                city: business.city,
                district: business.district
            })
        }
    }

    //点击头像上传图片
    $(".avatar").click(function () {
        //模拟点击
        $('#avatar').click()
    })

    //图片预览功能
    $("#avatar").change(function () {
        //获取选择图片的第一张
        // console.log(this.files[0])

        //将JS的文件对象，转换成本地可预览图片文件
        //读取器
        var reader = new FileReader()

        //让读取器去读取这个JS的文件对象
        reader.readAsDataURL(this.files[0])

        //给读取器绑定一个读取成功的事件
        reader.onloadend = function (e) {
            //得到转换后的base64的图片数据
            $(".avatar img").attr('src', e.target.result)
        }
    })

    //表单提交
    $('.profile').submit(async function (e) {
        //阻止表单提交的默认功能
        e.preventDefault()

        //获取邮箱和密码的内容
        var mobile = $.trim($('#mobile').val())
        var password = $.trim($('#password').val())

        //正则表达式
        var reg = /^1[3-9]\d{9}/
        if (!reg.test(mobile)) {
            mui.alert('手机号码格式不正确')
            return false
        }

        //在密码不为空的情况下，才会去验证密码，如果为空就说明不修改密码
        if (password.length > 0) {
            var reg = /^[a-zA-Z0-9]{4,16}$/;

            if (!reg.test(password)) {
                mui.alert('密码格式不正确')
                return false
            }
        }

        //获取昵称
        var nickname = $.trim($('#nickname').val())

        //性别
        var gender = $('.gender').val()

        //详细地址
        var address = $.trim($('#address').val())

        //组装数据
        var data = {
            id: business.id,
            nickname,
            mobile,
            gender,
            address
        }

        //判断密码是否为空
        if (password.length > 0) {
            data.password = password
        }

        //判断是否有图片上传
        if ($("#avatar")[0].files[0]) {
            data.avatar = $("#avatar")[0].files[0]
        }

        //先获取到城市地区的元素
        var citypicker = $('#region').data('citypicker')
        var region = citypicker.getCode('district') || citypicker.getCode('city') || citypicker.getCode('province')

        //如果有选择一级，就更新
        if (region) {
            data.region = region
        }

        //发送请求
        var result = await UPLOAD({
            url: "/business/profile",
            params: data
        })

        //更新失败
        if (result.code == 0) {
            mui.toast(result.msg)
            return false
        } else {
            //更新成功 覆盖cookie
            cookie.set('business', JSON.stringify(result.data))

            //提醒跳转
            mui.toast(result.msg, { duration: 1000 })

            setTimeout(() => {
                location.reload()
                location.href = 'UserIndex.html'
            }, 1000)
        }

    })
</script>